<template>
	<div ref="MenuButtons">
		<el-dialog title="菜单按钮信息" width="800px" :visible.sync="dialogFormVisible" :close-on-press-escape="false"
			:close-on-click-modal="false" @closed="afterCloseDialog">
			<el-form :model="menuButtonsForm" ref="menuButtonsForm" :rules="formRules" label-width="100px"
				style="padding-right: 0;">
				<el-row>
					<el-col :md="12">
						<el-form-item label="菜单名称" prop="menuName"> {{menuButtonsForm.menuName}} </el-form-item>
					</el-col>
					<el-col :md="12" style="text-align: right;">
						<el-button type="success" icon="el-icon-plus" @click="handleAddDetail">新增</el-button>
					</el-col>
				</el-row>
				<el-table :data="menuButtonsForm.buttons" border stripe style="width: 100%"
					class="class-table dictionary-table">
					<el-table-column label="序号" width="60" align="center">
						<template slot-scope="scope">{{ scope.$index + 1 }}</template>
					</el-table-column>
					<el-table-column label="代码" prop="btnCode" sortable label-class-name="must">
						<template slot-scope="scope">
							<el-form-item :prop="'buttons.' + scope.$index + '.btnCode'" :rules="formRules.btnCode"
								label-width="0px">
								<el-input v-model="scope.row.btnCode" maxlength="30"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="名称" prop="btnName" label-class-name="must">
						<template slot-scope="scope">
							<el-form-item :prop="'buttons.' + scope.$index + '.btnName'" :rules="formRules.btnName"
								label-width="0px">
								<el-input v-model="scope.row.btnName" maxlength="255"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="排序" prop="btnSort" label-class-name="must">
						<template slot-scope="scope">
							<el-form-item :prop="'buttons.' + scope.$index + '.btnSort'" :rules="formRules.btnSort"
								label-width="0px">
								<el-input v-model="scope.row.btnSort" maxlength="2"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="80px">
						<template slot-scope="scope">
							<el-button type="danger" icon="el-icon-delete-solid" @click.native.prevent="
                deleteRow(scope.$index, menuButtonsForm.buttons)
              "></el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">返回</el-button>
				<el-button type="primary" @click="saveForm">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<style lang="scss">
	.dictionary-table .el-form-item {
		margin-bottom: 0px;
	}

	.dictionary-table .el-form-item__error {
		position: relative;
	}
</style>

<script>
	export default {
		name: "SysMenuButtons",
		components: {},
		data() {
			// 动态添加行的代码重复验证规则
			var checkCode = (rule, value, callback) => {
				var indexs = rule.field.split(".");
				var index = indexs[1];

				if (value) {
					if (this.menuButtonsForm.buttons.length > 1) {
						for (var i = 0; i < index; i++) {
							if (this.menuButtonsForm.buttons[i].btnCode == value) {
								callback(new Error("代码重复"));
								break;
							}
						}
						callback();
					} else {
						callback();
					}
				} else {
					callback();
				}
			};

			return {
				// 控制弹窗开启/关闭
				dialogFormVisible: false,
				menuButtonsForm: {
					id: "",
					menuName: "",
					buttons: [],
				},
				formRules: {
					btnCode: [{
							required: true,
							message: "代码编码必填"
						},
						{
							validator: checkCode,
							trigger: "blur"
						},
					],
					btnName: [{
						required: true,
						message: "代码名称必填"
					}],
					btnSort: [{
							required: true,
							message: "排序必填"
						},
						{
							pattern: "^[0-9]+$",
							message: "排序格式不正确"
						},
					],
				}
			};
		},
		methods: {
			// 打开弹窗
			initForm(id) {
				if (id) {
					this.menuButtonsForm.id = id;
					this.$api.post('/menu/getButtonsByMenuId', {menuId: id}).then((response) => {
						this.menuButtonsForm = response.data;
						this.menuButtonsForm.buttons.forEach((element) => {
							element.btnSort = element.btnSort + "";
						});
						this.dialogFormVisible = true;
					});
				} else {
					this.dialogFormVisible = true;
				}
			},

			// 保存事件
			saveForm() {
				this.$refs.menuButtonsForm.validate((valid) => {
					if (valid) {
						this.$api.post('/menu/setButtonsByMenuId', this.menuButtonsForm).then((response) => {
							if (response.success) {
								this.$message.success(response.message);
								this.dialogFormVisible = false;
								this.$parent.handleSearch();
							} else {
								this.$message.error(response.message);
							}
						});
					}
				});
			},
			afterCloseDialog() {
				this.menuButtonsForm = {
					id: "",
					menuName: "",
					buttons: [],
				};
				this.$refs.menuButtonsForm.resetFields();
			},
			// 新增明细
			handleAddDetail() {
				var codesAll = {
					id: "",
					btnCode: "",
					btnName: "",
					btnSort: "",
				};
				this.menuButtonsForm.buttons.push(codesAll);
			},
			// 删除明细
			deleteRow(index, buttons) {
				buttons.splice(index, 1);
			},
		},
	};
</script>
